<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="">
		<table border="1" cellspacing="0" cellpadding="10" id="bjntable">
			<tr><th>比基尼海滩居民</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>家庭住址</th>
			</tr>
			<tr><td><input type="checkbox" name="man"  value="man" /></td>
				<td>海绵宝宝</td>
				<td>男</td>
				<td>20</td>
				<td>菠萝屋</td>
			</tr>
			<tr><td><input type="checkbox" name="man"  value="man" /></td>
				<td>派大星</td>
				<td>男</td>
				<td>20</td>
				<td>石头屋</td>
			</tr>
			<tr><td><input type="checkbox" name="man"  value="man" /></td>
				<td>章鱼哥</td>
				<td>男</td>
				<td>25</td>
				<td>复活岛人像屋</td>
			</tr>
			<tr><td><input type="checkbox"  name="woman" value="woman" /></td>
				<td>珊迪</td>
				<td>女</td>
				<td>20</td>
				<td>玻璃罩圆顶树屋</td>
			</tr>
			<tr><td><input type="checkbox" name="man"  value="man" /></td>
				<td>蟹老板</td>
				<td>男</td>
				<td>35</td>
				<td>蟹堡王餐厅</td>
			</tr>
			<tr><td><input type="checkbox" name="man"  value="man" /></td>
				<td>痞老板</td>
				<td>男</td>
				<td>35</td>
				<td>海之霸餐厅</td>
			</tr>
			<tr><td><input type="checkbox"  name="woman" value="woman" /></td>
				<td>珍珍</td>
				<td>女</td>
				<td>18</td>
				<td>船锚屋</td>
			</tr>
			<tr><td><input type="checkbox"  name="woman" value="woman" /></td>
				<td>泡芙老师</td>
				<td>女</td>
				<td>25</td>
				<td>泡芙驾校</td>
			</tr>
		</table>
		</form>
		<input type="checkbox" name="" id="xz" value="" onclick="pp();" />全选
		<input type="checkbox" name="" id="m" value=""  onclick="man();"/>全选男
		<input type="checkbox" name="" id="w" value=""  onclick="woman();"/>全选女
	</body>
	<script type="text/javascript">
		function pp(){//全部 用所有都有的input标签
			var bjntable=document.getElementById('bjntable');
			var inputall=bjntable.getElementsByTagName('input');
			console.log(inputall);
			var check=document.getElementById('xz').checked;
			console.log(check)
			for (var i=0;i<inputall.length;i++) {
				inputall[i].checked=check;
			}
		}
		function man(){//男 用name名字
			var bjntable=document.getElementById('bjntable');
			var nameall=document.getElementsByName('man');
			console.log(nameall);
			var check=document.getElementById('m').checked;
			console.log(check)
			for (var i=0;i<nameall.length;i++) {
				nameall[i].checked=check;
			}
			
		}
		function woman(){//女 
			var bjntable=document.getElementById('bjntable');
			var idall=document.getElementsByName('woman');
			console.log(idall);
			var check=document.getElementById('w').checked;
			console.log(check)
			for (var i=0;i<idall.length;i++) {
				idall[i].checked=check;
			}
			
		}
	</script>
</html>
